<!-- 患者管理 -->
<template>
  <div class="staff-wrapper">
    <div class="seach-box box">
      <el-form
        ref="searchFrom"
        size="mini"
        :inline="true"
        :model="searchFrom"
        class="demo-form-inline"
      >
        <el-form-item label="患者信息" class="minclass">
          <el-input
            v-model.trim="searchFrom.patientInfo"
            placeholder="请输入患者姓名/联系方式"
          />
        </el-form-item>
        <el-form-item label="患者状态" class="minclass">
          <el-select v-model="searchFrom.isDead">
            <el-option
              v-for="(item, index) in allStatus"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="术者" class="minclass">
          <el-input
            v-model.trim="searchFrom.operator"
            placeholder="请输入术者姓名"
          />
        </el-form-item>
        <el-form-item label="创建人" class="minclass">
          <el-input
            v-model.trim="searchFrom.creatorName"
            placeholder="请输入创建人姓名"
          />
        </el-form-item>
        <el-form-item label="创建时间" class="minclass2">
          <el-date-picker
            v-model="searchFrom.createDate"
            type="daterange"
            align="right"
            :clearable="false"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
        /></el-form-item>
        <el-form-item
          label="上报状态"
          class="minclass"
          style="margin-bottom: 0"
        >
          <el-select v-model="searchFrom.isReport">
            <el-option
              v-for="(item, index) in allUpStatus"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上报日期" class="minclass2">
          <el-date-picker
            v-model="searchFrom.upDate"
            type="daterange"
            align="right"
            unlink-panels
            :clearable="false"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
        /></el-form-item>
        <el-form-item class="btn-content">
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="resetForm('searchFrom')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="box data-box">
      <div class="add-btn">
        <el-button type="primary" size="mini" @click="lookDetail(1)"
          >新增</el-button
        >
      </div>
      <div class="table-box">
        <div class="table">
          <el-table
            :data="tableData"
            size="mini"
            style="width: 100%"
            max-height="555"
            :header-cell-style="{
              background: '#F7F8FA',
              color: '#203549',
            }"
          >
            <el-table-column
              prop="userId"
              align="center"
              label="序号"
              width="60"
            >
              <template slot-scope="scope">
                {{
                  (pageData.currentPage - 1) * pageData.pageSize +
                  scope.$index +
                  1
                }}
              </template>
            </el-table-column>
            <el-table-column prop="name" align="center" label="患者姓名" />

            <el-table-column
              prop="operationName"
              align="center"
              label="手术类型"
              width="200px"
            />
            <el-table-column prop="gender" align="center" label="性别">
              <template slot-scope="scope">
                {{
                  scope.row.gender == 1
                    ? '男'
                    : scope.row.gender == 2
                    ? '女'
                    : ''
                }}
              </template>
            </el-table-column>
            <el-table-column prop="age" align="center" label="年龄" />

            <el-table-column
              prop="cardNo"
              align="center"
              label="身份证号"
              width="200px"
            />
            <el-table-column prop="phone" align="center" label="联系方式" />
            <el-table-column prop="isDead" align="center" label="患者状态">
              <template slot-scope="scope">
                {{
                  scope.row.isDead == 0
                    ? '正常'
                    : scope.row.isDead == 1
                    ? '死亡'
                    : ''
                }}
              </template>
            </el-table-column>
            <el-table-column prop="operator" align="center" label="术者" />
            <el-table-column prop="isReport" align="center" label="上报状态">
              <template slot-scope="scope">
                {{
                  scope.row.isReport == 0
                    ? '待上报'
                    : scope.row.isReport == 1
                    ? '已上报'
                    : ''
                }}
              </template>
            </el-table-column>

            <el-table-column prop="reportTime" align="center" label="上报日期">
              <template slot-scope="scope">
                {{
                  scope.row.reportTime
                    ? timeMode(scope.row.reportTime).datestr
                    : '---'
                }}
              </template>
            </el-table-column>

            <el-table-column prop="creatorName" align="center" label="创建人" />

            <el-table-column prop="createTime" align="center" label="创建日期">
              <template slot-scope="scope">
                {{ timeMode(scope.row.createTime).datestr }}
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              align="center"
              label="操作"
              width="160"
            >
              <template slot-scope="scope">
                <el-button
                  @click="lookDetail(2, scope.row)"
                  type="text"
                  class="look-detail"
                  size="mini"
                  >查看</el-button
                >
                <el-button
                  type="text"
                  size="mini"
                  class="look-detail red"
                  @click="handleDelete(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <Pagination @getData="getData" :pageData="pageData" />
      </div>
    </div>
  </div>
</template>

<script>
import { timeMode, CheckIDCardByJS } from '@/utils/js/util';
import Pagination from '@/components/Pagination';
export default {
  name: 'PlatformPatient',
  data() {
    return {
      timeMode,
      CheckIDCardByJS,
      searchFrom: {
        accountId: sessionStorage.getItem('accountId'),
        patientInfo: '', //患者信息
        operator: '', //术者
        isDead: '', //患者状态
        creatorName: '', //创建人
        createDate: [], //创建时间
        isReport: '', //上报状态
        upDate: [], //上报日期
      },
      hospitalId: '',
      tableData: [],
      allStatus: [
        {
          value: '',
          label: '全部',
        },
        {
          value: 1,
          label: '死亡',
        },
        {
          value: 0,
          label: '正常',
        },
      ],
      allUpStatus: [
        {
          value: '',
          label: '全部',
        },
        {
          value: 0,
          label: '待上报',
        },
        {
          value: 1,
          label: '已上报',
        },
      ],
      // 传给分页的数据
      pageData: {
        total: 100,
        pageSize: 10,
        currentPage: 1,
      },
    };
  },

  components: {
    Pagination,
  },

  computed: {},

  mounted() {
    this.pageData = {
      total: this.tableData.length,
      pageSize: 10,
      currentPage: 1,
    };
    this.getPatientList(
      this.pageData.currentPage,
      this.pageData.pageSize,
      this.searchFrom
    );
  },

  methods: {
    //获取--患者列表
    getPatientList(currentPage, pageSize, info) {
      let params = {
        accountId: info.accountId,
        patientInfo: info.patientInfo,
        isDead: info.isDead,
        operator: info.operator,
        startTime: info.upDate && info.upDate.length > 0 ? info.upDate[0] : '',
        endTime: info.upDate && info.upDate.length > 0 ? info.upDate[1] : '',
        creatorName: info.creatorName,
        startCreateTime:
          info.createDate && info.createDate.length > 0
            ? info.createDate[0]
            : '',
        endCreateTime:
          info.createDate && info.createDate.length > 0
            ? info.createDate[1]
            : '',
        isReport: info.isReport,
        currentPage,
        pageSize,
      };
      this.$http
        .showPatient(params)
        .then(res => {
          if (res.code == '0000000000') {
            this.tableData = res.data.records;
            this.tableData.forEach(item => {
              if (item.age === null) {
                item.age = '';
              }
            });
            this.pageData.currentPage = res.data.current;
            this.pageData.pageSize = res.data.size;
            this.pageData.total = res.data.total;
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: 'error',
            });
          }
        })
        .catch(() => {});
    },
    //  分页数据改变
    getData(val) {
      this.pageData = val;
      this.getPatientList(
        this.pageData.currentPage,
        this.pageData.pageSize,
        this.searchFrom
      );
    },
    handleDelete(val) {
      this.$confirm('此操作将永久删除该患者, 是否继续?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$http
            .delPatient(val.patientId)
            .then(res => {
              if (res.code == '0000000000') {
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                });
                this.getPatientList(
                  this.pageData.currentPage,
                  this.pageData.pageSize,
                  this.searchFrom
                );
              } else {
                this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'error',
                });
              }
            })
            .catch(() => {});
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    //去往详情页面
    lookDetail(val, arr) {
      let info = {};
      info = {
        ...arr,
        showType: val,
      };
      this.$router.push({
        path: '/hospital/hospitalPatientDetail',
        query: {
          info: JSON.stringify(info),
        },
      });
    },
    onSubmit() {
      this.pageData.currentPage = 1;
      this.getPatientList(
        this.pageData.currentPage,
        this.pageData.pageSize,
        this.searchFrom
      );
    },
    resetForm() {
      this.searchFrom = {
        accountId: sessionStorage.getItem('accountId'),
        patientInfo: '', //患者信息
        operator: '', //术者
        isDead: '', //患者状态
        creatorName: '', //创建人
        createDate: [], //创建时间
        isReport: '', //上报状态
        upDate: [],
      };
      this.pageData = {
        total: 10,
        pageSize: 10,
        currentPage: 1,
      };
      this.getPatientList(
        this.pageData.currentPage,
        this.pageData.pageSize,
        this.searchFrom
      );
    },
  },
};
</script>
<style lang="less" scoped>
.staff-wrapper {
  text-align: left;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  .box {
    background: #fff;
    margin: 0;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 16px;
  }
  .seach-box {
    text-align: left;
    /deep/.el-form {
      .minclass .el-form-item__content {
        width: 240px;
        margin-right: 22px;
        .el-input {
          width: 240px;
          height: 32px;
        }
        .el-input__inner {
          height: 32px;
        }
      }
      .minclass2 {
        margin-bottom: 0;
      }
      .minclass2 .el-form-item__content {
        margin-right: 22px;

        .el-input__inner {
          width: 310px;
          height: 32px;
        }
      }
      .el-range-separator {
        line-height: 24px;
      }
      .el-form-item__label {
        line-height: 32px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #111111;
      }
    }
  }
  .data-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    padding-bottom: 16px;
    .add-btn {
      text-align: left;
      margin-bottom: 10px;
      /deep/ .el-button {
        width: 76px;
        height: 32px;
        line-height: 32px;
        padding: 0;
      }
    }
    .table-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      .table {
        flex: 1;
        display: flex;
        flex-direction: column;
        /deep/.el-table {
          margin-bottom: 10px;
          .el-table__cell {
            padding: 10px 0;
          }
        }
        /deep/.el-table::before {
          height: 0;
        }
      }
      /deep/.pagination {
        position: revert;
      }
    }
  }
}
.btn-content {
  margin-bottom: 0;
}
/deep/.btn-content .el-form-item__content {
  .el-button {
    width: 76px;
    height: 32px;
    line-height: 32px;
    padding: 0;
  }
}
/deep/ .el-button--primary {
  color: #fff;
  background-color: #0a73e4;
  border-color: #0a73e4;
}
.look-detail {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #0a73e4;
}
.red {
  color: #ff595a;
}

.el-date-editor {
  /deep/.el-range__icon {
    position: absolute;
    right: 10px;
    height: 24px;
    line-height: 24px;
  }
  /deep/.el-range__close-icon {
    display: none;
  }
}
</style>
